<template>
	<view class="wechat-official-login">

		<!-- 标题栏 -->
		<view class="header">
			<text class="title">公众号登录</text>
			<text class="subtitle">通过关注公众号完成登录</text>
		</view>

		<!-- 二维码区域 -->
		<view class="qrcode-section">
			<view class="qrcode-container">
				<image class="qrcode-image" src="http://localhost:3000/images/qrcode_for_gh_cc1250f5e174_258.jpg" mode="aspectFit" />
			</view>
		</view>

		<!-- 加密字符串区域 -->
		<view class="code-section">
			<view class="code-label">
				<text class="label-text">验证码</text>
				<text class="label-desc">(复制后粘贴到公众号)</text>
			</view>
			<view class="code-container">
				<text class="code-text">{{ encryptedCode }}</text>
				<button class="copy-btn" @tap="copyCode">
					<text>复制</text>
				</button>
			</view>
		</view>

		<!-- 操作说明 -->
		<view class="instruction-section">
			<view class="step">
				<text class="step-number">1</text>
				<text class="step-text">长按上方图片保存二维码</text>
			</view>
			<view class="step">
				<text class="step-number">2</text>
				<text class="step-text">打开微信扫描或从相册选择二维码</text>
			</view>
			<view class="step">
				<text class="step-number">3</text>
				<text class="step-text">关注公众号后，粘贴上方验证码</text>
			</view>
			<view class="step">
				<text class="step-number">4</text>
				<text class="step-text">公众号返回登录成功提示</text>
			</view>
		</view>

		<!-- 底部状态 -->
		<view class="status-section">
			<view class="status-info">
				<text class="status-text" :class="{ success: loginSuccess }">
					{{ statusMessage }}
				</text>
				<text class="timer-text" v-if="!loginSuccess">
					{{ countdown > 0 ? `验证码将在 ${countdown} 秒后过期` : '验证码已过期' }}
				</text>
			</view>

			<button class="refresh-btn" @tap="refreshCode" v-if="!loginSuccess">
				<text>刷新验证码</text>
			</button>

			<button class="success-btn" @tap="goBack" v-if="loginSuccess">
				<text>返回首页</text>
			</button>
		</view>

		<!-- 加载遮罩 -->
		<view class="loading-mask" v-if="loading">
			<view class="loading-content">
				<text class="loading-text">验证中...</text>
			</view>
		</view>
	</view>
</template>

<script>
import { getWechatOfficialCode, checkWechatOfficialLogin } from '@/api/auth.js';
import storage from '@/utils/storage.js';
export default {
	data() {
		return {
			encryptedCode: '',
			countdown: 300, // 5分钟倒计时
			loginSuccess: false,
			statusMessage: '等待公众号验证...',
			loading: false,
			checkInterval: null
		}
	},
	onLoad() {
		this.initWechatLogin();
	},
	onUnload() {
		if (this.checkInterval) {
			clearInterval(this.checkInterval);
		}
	},
	methods: {
		// 初始化微信登录
		async initWechatLogin() {
			try {
				this.loading = true;
				const result = await getWechatOfficialCode();
				this.encryptedCode = result.code;
				this.startCountdown();
				this.startChecking();
			} catch (error) {
				uni.showToast({
					title: '网络错误，请重试',
					icon: 'none'
				});
			} finally {
				this.loading = false;
			}
		},

		// 开始倒计时
		startCountdown() {
			this.countdown = 300;
			const timer = setInterval(() => {
				this.countdown--;
				if (this.countdown <= 0) {
					clearInterval(timer);
					this.statusMessage = '验证码已过期';
				}
			}, 1000);
		},

		// 开始定时检查登录状态
		startChecking() {
			this.checkInterval = setInterval(async () => {
				if (this.countdown <= 0) {
					clearInterval(this.checkInterval);
					return;
				}

				try {
					const result = await checkWechatOfficialLogin(this.encryptedCode);

					this.loginSuccess = true;
					this.statusMessage = '登录成功！';
					clearInterval(this.checkInterval);

					// 保存用户信息
					if (result.userInfo) {
						storage.set('userInfo', result.userInfo);
						storage.set('token', result.token);
					}

					uni.showToast({
						title: '登录成功',
						icon: 'success'
					});
				} catch (error) {
					console.error('检查登录状态失败:', error);
				}
			}, 2000); // 每2秒检查一次
		},

		// 复制验证码
		copyCode() {
			if (!this.encryptedCode) {
				uni.showToast({
					title: '验证码为空',
					icon: 'none'
				});
				return;
			}

			uni.setClipboardData({
				data: this.encryptedCode,
				success: () => {
					uni.showToast({
						title: '验证码已复制',
						icon: 'success'
					});
				}
			});
		},

		// 刷新验证码
		async refreshCode() {
			if (this.countdown > 240) {
				uni.showToast({
					title: '验证码还有效，无需刷新',
					icon: 'none'
				});
				return;
			}

			if (this.checkInterval) {
				clearInterval(this.checkInterval);
			}

			await this.initWechatLogin();
		},

		// 返回首页
		goBack() {
			uni.switchTab({
				url: '/pages/app/index'
			});
		},

		// 跳转到手机登录页面
		goToPhoneLogin() {
			uni.navigateBack({
				delta: 1
			});
		}
	}
}
</script>

<style lang="scss" scoped>
.wechat-official-login {
	min-height: 100vh;
	background: #f8f9fa;
	padding: 40rpx;
}

.header {
	text-align: center;
	margin-bottom: 60rpx;

	.title {
		font-size: 48rpx;
		font-weight: bold;
		color: #2c3e50;
		display: block;
		margin-bottom: 16rpx;
	}

	.subtitle {
		font-size: 28rpx;
		color: #7f8c8d;
	}
}

.qrcode-section {
	margin-bottom: 40rpx;

	.qrcode-container {
		text-align: center;

		.qrcode-image {
			width: 400rpx;
			height: 400rpx;
			border: 1rpx solid #e0e0e0;
		}
	}
}

.code-section {
	margin-bottom: 40rpx;

	.code-label {
		margin-bottom: 20rpx;

		.label-text {
			font-size: 32rpx;
			font-weight: bold;
			color: #2c3e50;
			display: block;
			margin-bottom: 8rpx;
		}

		.label-desc {
			font-size: 24rpx;
			color: #7f8c8d;
		}
	}

	.code-container {
		display: flex;
		align-items: center;
		background: #ffffff;
		border: 1rpx solid #e0e0e0;
		border-radius: 8rpx;
		padding: 24rpx;

		.code-text {
			flex: 1;
			font-size: 32rpx;
			font-family: 'Courier New', monospace;
			color: #e74c3c;
			font-weight: bold;
			letter-spacing: 2rpx;
		}

		.copy-btn {
			background: #e74c3c;
			color: white;
			border: none;
			border-radius: 6rpx;
			font-size: 26rpx;
			min-width: 120rpx;
			margin-left: 20rpx;
			padding: 16rpx 24rpx;
		}
	}
}

.instruction-section {
	margin-bottom: 40rpx;

	.step {
		display: flex;
		align-items: center;
		margin-bottom: 24rpx;

		&:last-child {
			margin-bottom: 0;
		}

		.step-number {
			width: 40rpx;
			height: 40rpx;
			background: #e74c3c;
			color: white;
			border-radius: 50%;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 20rpx;
			font-weight: bold;
			margin-right: 20rpx;
		}

		.step-text {
			font-size: 28rpx;
			color: #2c3e50;
			flex: 1;
		}
	}
}

.status-section {
	.status-info {
		text-align: center;
		margin-bottom: 32rpx;

		.status-text {
			font-size: 32rpx;
			color: #e74c3c;
			font-weight: bold;
			display: block;
			margin-bottom: 16rpx;

			&.success {
				color: #27ae60;
			}
		}

		.timer-text {
			font-size: 24rpx;
			color: #7f8c8d;
		}
	}

	.refresh-btn,
	.success-btn {
		width: 100%;
		height: 80rpx;
		border: none;
		border-radius: 8rpx;
		font-size: 32rpx;
		font-weight: bold;

		&.refresh-btn {
			background: #e74c3c;
			color: white;
		}

		&.success-btn {
			background: #27ae60;
			color: white;
		}
	}
}

.loading-mask {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.5);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 9999;

	.loading-content {
		background: white;
		border-radius: 8rpx;
		padding: 40rpx 60rpx;
		text-align: center;

		.loading-text {
			font-size: 28rpx;
			color: #2c3e50;
		}
	}
}
</style>